<template>
    <!-- 质量检查情况 -->
    <a-spin :spinning="loading">
      <a-card>
        <title-name :title="`${$route.query.month}月质量管理信息概览`"></title-name>
        <!-- 详情列表 -->
        <div style="padding: 0 20px 20px;">
          <title-name title="项目质量管理得分与排名"></title-name>
          <div v-if="Object.keys(baseInfo).length > 0">
            <div v-for="(item, index) in baseInfo" :key="index">
              <div class="branchName">{{ item[0].branchComName }}</div>
              <div>
                <Empty v-if="!item.length" description="暂无数据" />
                <a-table v-else :rowKey="(record, index) => record.id" bordered :pagination="false" :columns="columns" :dataSource="item">
                </a-table>
              </div>
            </div>
          </div>
          <Empty v-else description="暂无数据" />
        </div>
      </a-card>
      <!-- 编辑质量检查情况 -->
      <DialogForm ref="dialogForm" :visible.sync="visible" edit-model="E" headerTitle="编辑管理行为得分" :width="1000" :form="form" :formList="formList" :rules="rules" @confirm="submitForm" />
    </a-spin>
  </template>
  
  <script>
  import { qualityMonthManageScorescorequery, qualityMonthManageScorescoreupdate } from '@/api/quality/qualityMonth/qualityManagementInfo' // api
  import { Empty } from 'ant-design-vue' // 无数据提示
  import DialogForm from '@/components/DialogForm' // 表单弹窗
  import { columns0 } from './qualityManagementInfoColumns'
  export default {
    name: 'a' + Date.now(),
    props: {
      // 请求参数
      queryParam: {
        type: Object,
        default: () => null
      }
    },
    components: {
      Empty,
      DialogForm
    },
    data() {
      return {
        loading: false, // 加载控件
        form: {}, // 编辑表单
        visible: false, // 弹窗显隐控件
        rules: {
          manageActionScore: [{ required: true, message: '请输入管理行为得分', trigger: 'change' }]
        }, // 校验规则
        formList: [
          { type: 'BaseInputNumber', attrs: {min: 0}, keyName: 'manageActionScore', label: '管理行为得分', span: 8 }
        ], // 弹窗表单配置项
        baseInfo: {} // 详情
      }
    },
    computed: {
      // 统计表头
      columns() {
        let columns = this.$clone(columns0)
        // 节点若为分公司则添加操作按钮
        this.queryParam.branchComId && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) &&
          columns.push({
            title: '操作',
            dataIndex: 'actions',
            width: '80px',
            align: 'center',
            customRender: (text, record) => {
              return (
                record.id != '0' && (
                  <a
                    onClick={() => {
                      this.form.manageActionScore = record.manageActionScore
                      this.form.id = record.id
                      this.visible = true
                    }}
                  >
                    编辑
                  </a>
                )
              )
            }
          })
        return columns
      }
    },
    mounted() {
      // 初始化
    },
    watch: {
      queryParam: {
        immediate: true,
        deep: true,
        handler(val) {
          if (val) {
            this.init()
          }
        }
      },
    },
    methods: {
      /**
       * 初始化
       */
      init() {
        this.loading = true
        // 请求检查情况
        qualityMonthManageScorescorequery(this.queryParam)
          .then((res) => {
            if (res.data) {
              this.baseInfo = res.data
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      /**
       * 提交表单
       * form：表单
       */
      submitForm(e) {
        let form = this.$clone(e)
        form.qualityMonthId = this.$route.query.id
        form.isAdjust = this.$route.query.isAdjust
        this.$refs.dialogForm.loading = true
        qualityMonthManageScorescoreupdate(form)
          .then((res) => {
            if (res.code === '0') {
              this.init()
              this.$message.success('编辑成功！')
              this.visible = false
            }
          })
          .finally(() => {
            this.$refs.dialogForm.loading = false
          })
      }
    }
  }
  </script>
  